
import types from '@babel/types'

import genTools from '@babel/generator'

const test1 = () => {
  let s1 = types.jsxElement(
    // 开放标签，对应HTML中的  <p> 左标签
    types.jsxOpeningElement(types.jsxIdentifier('Button'), []),

    // 闭合标签
    types.jsxClosingElement(types.jsxIdentifier('Button')),

    // 子元素， 这里对应的就是 <Button>这里是children</Button>
    [types.jsxExpressionContainer(types.identifier('props.name'))]
  )

  // 手动构造的AST对象
  console.log(s1);

  // 最终生成的代码 <Button>{props.name}</Button>
  console.log(genTools.default(s1).code);
}


test1()

const test2 = () => {
  console.log('创建jsx 的 代码片段');

  /**
   * 期望创建的目标
   * <>
   *  <Button>{props.name}</Button>
   *  <Button>{props.age}</Button>
   * </>
   */

  const f1 = types.jsxFragment(
    // 开始标签 <>   jsx语法特有的
    types.jsxOpeningFragment(),
    // 结束标签 </>
    types.jsxClosingFragment(),

    // 子元素
    [
      // 创建第一行 <Button>{props.name}</Button>
      types.jsxElement(
        // 创建开始标签 <Button>
        types.jsxOpeningElement(
          types.jsxIdentifier('Button'),
          []
        ),
        types.jsxClosingElement(
          types.jsxIdentifier('Button')
        ),

        // 子元素内容， child
        [
          types.jsxExpressionContainer(types.identifier('props.name'))
        ]
      ),

      types.jsxElement(
        // 创建开始标签 <Button>
        types.jsxOpeningElement(
          types.jsxIdentifier('Button'),
          []
        ),
        types.jsxClosingElement(
          types.jsxIdentifier('Button')
        ),

        // 子元素内容， child
        [
          types.jsxExpressionContainer(types.identifier('props.age'))
        ]
      ),


    ]

  )

  // console.log(f1);
  // <><Button>{props.name}</Button><Button>{props.age}</Button></>
  // 没有换行符，需要使用prettier做格式化
  console.log(genTools.default(f1).code);
}

test2()

